<script setup lang='ts'>
import { onMounted, ref, reactive } from 'vue';
import { Search, Plus, Refresh } from '@element-plus/icons-vue'
import axios from "axios";


defineOptions({
  name: ''
})
const loading = ref<boolean>(true)
const listSearch = reactive({
  code: "",
  channelName: "",
  auditStatus: "",
  byDate: "",
});
const pageParams = reactive({
  search: {
    size: 20,
    page: 1,

  },
  total: 0,
  loadIng: false,
  tableData: []
})
onMounted(() => {
  getData()
})
const add = () => { }
const getData = () => {
  pageParams.loadIng = true
  axios.get("/bpi/getAdList").then(res => {
    pageParams.tableData = res.data.data
    pageParams.total = res.data.total
    pageParams.loadIng = false

  })
}
const handleSizeChange = (size: number) => {
  getData()
}
const handleCurrentChange = (page: number) => {
  getData()
}
</script>

<template>
  <div>
    <el-card shadow="never" style="margin-top: 10px;">
      <div class="list-search">
        <el-form :inline="true" :model="listSearch" class="demo-form-inline">
          <el-row>
            <el-form-item label="广告位名称">
              <el-input v-model="listSearch.code" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="渠道ID">
              <el-input v-model="listSearch.channelName" placeholder="请输入渠道ID" />
            </el-form-item>
            <el-form-item label="链接名称">
              <el-input v-model="listSearch.channelName" placeholder="请输入链接名称" />
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="listSearch.channelName" placeholder="请输入备注" />
            </el-form-item>
          </el-row>

          <el-form-item label="审核状态">
            <el-select v-model="listSearch.auditStatus" placeholder="请选择审核状态" style="width: 200px">
              <el-option label="已审核" value="1" />
              <el-option label="未审核" value="2" />
              <el-option label="审核中" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="审核日期">
            <el-date-picker style="width: 250px;" v-model="listSearch.byDate" type="datetimerange" range-separator="到"
              start-placeholder="开始日期" end-placeholder="结束日期" />
          </el-form-item>
        </el-form>
      </div>
      <div class="list-operate">
        <div class="operate-left">
          <el-button :icon="Plus" type="primary" @click="add">新建</el-button>
        </div>
        <div class="operate-right">
          <el-button :icon="Search" type="primary" @click="getData">查询</el-button>
          <el-button :icon="Refresh" @click="getData">重置</el-button>
        </div>
      </div>
    </el-card>
    <el-card shadow="never" style="margin-top: 10px;">
      <div class="list-table">
        <div v-if="pageParams.loadIng">
          <el-skeleton style="width: 100%" :loading="pageParams.loadIng" animated :count="3"></el-skeleton>
        </div>
        <div v-else>
          <el-table :data="pageParams.tableData" style="width: 100%" height="620" stripe v-loading="pageParams.loadIng"
            :header-cell-style="{ fontSize: '14px', backgroundColor: '#FFF2F3F5', color: '#333' }">
            <el-table-column prop="code" label="产品码" align="center" width="180" />
            <el-table-column prop="adName" align="center" label="广告位名称" min-width="100" show-overflow-tooltip />
            <el-table-column prop="channelCode" align="center" label="绑定渠道ID" min-width="100" show-overflow-tooltip />
            <el-table-column prop="linkName" align="center" label="链接名称" min-width="100" show-overflow-tooltip />
            <el-table-column prop="auditStatus" align="center" label="审核状态" min-width="100" show-overflow-tooltip />
            <el-table-column prop="passTime" align="center" label="审核时间" min-width="100" show-overflow-tooltip />
            <el-table-column prop="accessingUsers" align="center" label="今日访问用户" min-width="150"
              show-overflow-tooltip />
            <el-table-column prop="todayConversion" align="center" label="今日转化" min-width="100" show-overflow-tooltip />
            <el-table-column prop="todayConversionV" align="center" label="今日转化率" min-width="100"
              show-overflow-tooltip />
            <el-table-column prop="estimatedRevenue" align="center" label="预估收益" min-width="100"
              show-overflow-tooltip />
            <el-table-column prop="singlePrice" align="center" label="cpa单价" min-width="100" show-overflow-tooltip />
            <el-table-column prop="estimateCPM" align="center" label="预估CPM" min-width="100" show-overflow-tooltip />
            <el-table-column prop="todayTerminationRate" align="center" label="今日解约率" min-width="100"
              show-overflow-tooltip />
            <el-table-column prop="description" align="center" label="备注" min-width="100" show-overflow-tooltip />
            <el-table-column fixed="right" label="操作" align="center" width="220">
              <template #default>
                <el-button type="primary" size="small">详情</el-button>
                <el-button type="primary" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>


      </div>
    </el-card>

    <el-card shadow="never" style="margin-top: 10px;">
      <div class="demo-pagination-block">
        <el-pagination v-model:currentPage="pageParams.search.page" v-model:page-size="pageParams.search.size"
          :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="pageParams.total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>
  </div>
</template>

<style lang='scss' scoped>
.list-operate {
  display: flex;

  .operate-left {
    width: 150px;
  }

  .operate-right {
    flex: 1;
    display: flex;
    justify-content: end;
  }
}

.demo-pagination-block {
  display: flex;
  justify-content: end;
}
</style>
